<script setup>
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  const jump = (name) => {
    router.push({ name });
  }
</script>

<template>
  <main>
    <div>
      <el-row>
        <el-col :span="24">
          <div class="title">
            <el-text type="primary">图片操作</el-text>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="radius" @click="jump('base64ToPic')">base64图片互转</div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="24">
          <div class="title">
            <el-text type="primary">数据操作</el-text>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="radius" @click="jump('json2FormData')" >json转postman-formdata参数</div>
        </el-col>
        <el-col :span="6">
          <div class="radius" @click="jump('jsonOps')" >json操作</div>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="24">
          <div class="title">
            <el-text type="primary">其他</el-text>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="radius">esb文件生成报文</div>
        </el-col>
        <el-col :span="6">
          <div class="radius" @click="jump('timestampTransform')">时间戳转换</div>
        </el-col>
        <el-col :span="6">
          <div class="radius" @click="jump('unicode2CN')">unicode转中文</div>
        </el-col>
        <el-col :span="6">
          <div class="radius" @click="jump('fileUploadDown')">文件上传下载</div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<style scoped>
  .radius {
    height: 100px;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-small);

    background: #409EFF;
    color: #FFFFFF;
    text-align: center;
    line-height: 100px;
  }
</style>

